<template>
    <div class="shop">
        <div class="nav-title">
            <img src='@/img/pic1.jpg'>
            <h1>招标采购</h1>
        </div>
        <div class="supply">
            <el-row>
                <el-col :lg="18" :sm="24" :xs="24">
                    <h2 class="title">招标采购<span>IMPORT SUPPLY</span></h2>
                    <div v-if="purchase.data">
                    <el-row class="shop-news" v-for="item in purchase.data" :key="item.orderid">
                        <el-col :lg="8">
                            <div><img :src="item.img1"></div>
                        </el-col>
                        <el-col :lg="16">
                            <h2><router-link :to="`/pdetails?id=${item.orderid}`">{{item.goodsname}}</router-link></h2>
                            <h3>{{item.orderNameen}}</h3>
                            <p>{{item.summary}}</p>
                            <div class="clearbox">
                                <div class="fl clearbox">
                                    <p class="sate f1">订单状态:{{item.tradeflag==0?"未完成":"已完成"}}</p>
                                    <p class="fl type">
                                        <svg t="1749646358152" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="6782" width="200" height="200">
                                            <path
                                                d="M523.81 947.506c-154.37 0-325.726 0-325.726 0-34.818 0-63.04-27.984-63.04-62.502L135.044 135.008c0-34.524 28.224-62.5 63.04-62.5l377.35 0c-0.574 74.836 0.894 124.998 0.894 124.998 0 69.04 56.448 125 126.082 125 0 0 52.686 0 126.082 0 0 0 0 149.146 0 238.95 0 30.144 63.04 34.074 63.04 0.556 0-90.076 0-239.506 0-239.506l0-62.5L639.368 10.006l0 0.896c-4.056 0-20.85-1.556-63.04-0.896L198.084 10.006c-69.634 0-126.082 55.964-126.082 125.002l0 749.994c0 69.038 56.448 125.002 126.082 125.002 0 0 308.37-0.004 323.882 0C552.32 1010.016 558.798 947.506 523.81 947.506zM639.368 72.508l189.122 187.496-126.082 0c-34.816 0-63.04-27.984-63.04-62.5C639.368 197.504 639.368 146.914 639.368 72.508zM882.958 651.376 684.168 874.12l-122.04-121.554-61.002 60.754 183.044 182.308 259.79-283.502L882.958 651.376z"
                                                p-id="6783" fill="#0e932e"></path>
                                        </svg>
                                        {{ business[item.businessid-1].businessName }}
                                    </p>
                                </div>
                                <div class="fr">{{ item.publishtime }}</div>
                            </div>
                        </el-col>
                    </el-row>
                    </div>
                    <div>
                        <el-pagination background layout="prev, pager, next" 
                        :total="purchase.total_records"
                        :page-count="purchase.total_pages"
                        :current-page="purchase.page"
                        @prev-click="pageQuery"
                        @next-click="pageQuery"
                        @current-change="pageQuery" />
                    </div>
                </el-col>
                <el-col :lg="6" :sm="24" :xs="24">
                     <purchaseNav :busdata="business" :siddata="sidebar" @event="childfun"></purchaseNav>                                     
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import { toRefs, reactive,getCurrentInstance,onMounted} from 'vue'
import purchaseNav from '@/components/purchase_Nav.vue'

export default {
    components: {
        purchaseNav: purchaseNav
    },
    setup() {
        const data = reactive({
            business:[],
            sidebar:[],
            purchase:{},
            page:1,
            businessid:""
        })
        const pageQuery=(page)=>{
            data.page=page
            selpurchase()
        }
        const {proxy}=getCurrentInstance()
        const selpurchase=(async()=>{
            await proxy.$axios.get("/api/purchase",{
            params:{businessid:data.businessid,page:data.page,page_size:10}})
            .then(function(response){
                var arr=JSON.parse(response.data)
                console.log(arr)
                for (var obj of arr.data){
                    obj.img1=`/src/${obj.img1}`
                }
                data.purchase=arr
            })
        })
        const childfun=(value)=>{
            data.businessid=value
            selpurchase()
        }
        onMounted(async()=>{
            //行业分类
            await proxy.$axios.get("/api/business",{params:{}})
            .then(function(response){
                var arr=JSON.parse(response.data)
                data.business=arr
            })
            .catch(function(error){
                console.log(error);
            });
            //侧栏
            await proxy.$axios.get("/api/sidebar1",{params:{}})
            .then(function(response){
                var arr=JSON.parse(response.data)
                console.log(arr)
                for (var obj of arr){
                    obj.img1=`/src/${obj.img1}`
                }
                data.sidebar=arr
            })
            selpurchase()
        })
        return {
            ...toRefs(data),pageQuery,childfun
        }
    },
}
</script>

<style scoped></style>